<template>
    <div class="home-grid">
    <van-grid :column-num="5" square :gutter="5">
    <van-grid-item v-for="list in menulist" :key="list">
    <van-image :src="list.url" />
    <span>{{ list.text }}</span>
    </van-grid-item>
    </van-grid>
    </div>
   </template>
   <script setup>
   import menu1 from '../../assets/images/menu1.png'
   import menu2 from '../../assets/images/menu2.png'
   import menu3 from '../../assets/images/menu3.png'
   import menu4 from '../../assets/images/menu4.png'
   import menu5 from '../../assets/images/menu5.png'
   import menu6 from '../../assets/images/menu6.png'
   import menu7 from '../../assets/images/menu7.png'
   import menu8 from '../../assets/images/menu8.png'
   import menu9 from '../../assets/images/menu9.png'
   import menu10 from '../../assets/images/menu10.png'
   const menulist = [
    { text: '今日爆款', url: menu1 },
    { text: '好物分享', url: menu2 },
    { text: '推荐购买', url: menu3 },
    { text: '购物心得', url: menu4 },
    { text: '直播专区', url: menu5 },
    { text: '签到中心', url: menu6 },
    { text: '值得购买', url: menu7 },
    { text: '每日优惠', url: menu8 },
    { text: '充值中心', url: menu9 },
    { text: '我的客服', url: menu10 }
]
</script>
<style lang="less" scoped> 
.home-grid {
    .van-image {
        width: 55%;
    }
    span {
        font-size: 12px;
    }
}
</style>